@import "./mixin/color";
@import "./var";
.gs--input-box {
    display: flex;
    align-items: center;
}

.gs--textarea-box {
    display: flex;
    align-items: flex-end;
}

.gs-input--i {
    font-size: 1.5em;
    transform: translate(-130%, 0);
    cursor: pointer;
    &.gs-input--i:hover {
        filter: alpha(Opacity=70);
        opacity: 0.7;
    }
}

.gs-input--long {
    transform: translate(-130%, 0);
}

.gs-input--textarea {
    border: 1px solid $--color-primary;
    outline: none; //选中边框
    font-size: 1rem;
}

.gs-input--textarea:hover {
    border: 3px solid $--color-primary;
    outline: none; //选中边框
}

//input风格颜色
.gs-input--info {
    border-color: $--color-info;
    outline: none; //选中边框
    font-size: 1rem;
    &:hover {
        @include borderCol("info");
        box-shadow: 0 0 0 0.125em $--color-info;
    }
    &:active,
     :focus {
        @include borderCol("info");
        box-shadow: 0 0 0 0.125em $--color-info;
    }
    &:focus {
        @include borderCol("info");
        box-shadow: 0 0 0 0.125em $--color-info;
    }
}

.gs-input--primary {
    border-color: $--color-primary;
    outline: none; //选中边框
    font-size: 1rem;
    &:hover {
        @include borderCol("primary");
        box-shadow: 0 0 0 0.125em $--color-primary;
    }
    &:active,
     :focus {
        @include borderCol("primary");
        box-shadow: 0 0 0 0.125em $--color-primary;
    }
    &:focus {
        @include borderCol("primary");
        box-shadow: 0 0 0 0.125em $--color-primary;
    }
}

.gs-input--success {
    border: 1px solid $--color-success;
    outline: none; //选中边框
    font-size: 1rem;
    &:hover {
        @include borderCol("success");
        box-shadow: 0 0 0 0.125em $--color-success;
    }
    &:active,
     :focus {
        @include borderCol("success");
        box-shadow: 0 0 0 0.125em $--color-success;
    }
    &:focus {
        @include borderCol("success");
        box-shadow: 0 0 0 0.125em $--color-success;
    }
}

.gs-input--danger {
    border: 1px solid $--color-danger;
    outline: none; //选中边框
    font-size: 1rem;
    &:hover {
        @include borderCol("danger");
        box-shadow: 0 0 0 0.125em $--color-danger;
    }
    &:active,
     :focus {
        @include borderCol("danger");
        box-shadow: 0 0 0 0.125em $--color-danger;
    }
    &:focus {
        @include borderCol("danger");
        box-shadow: 0 0 0 0.125em $--color-danger;
    }
}

.gs-input--warning {
    border: 1px solid $--color-warning;
    outline: none; //选中边框
    font-size: 1rem;
    &:hover {
        @include borderCol("warning");
        box-shadow: 0 0 0 0.125em $--color-warning;
    }
    &:active,
     :focus {
        @include borderCol("warning");
        box-shadow: 0 0 0 0.125em $--color-warning;
    }
    &:focus {
        @include borderCol("warning");
        box-shadow: 0 0 0 0.125em $--color-warning;
    }
}

.gs-input--dark {
    border: 1px solid $--color-dark;
    outline: none; //选中边框
    font-size: 1rem;
    &:hover {
        @include borderCol("dark");
        box-shadow: 0 0 0 0.125em $--color-dark;
    }
    &:active,
     :focus {
        @include borderCol("dark");
        box-shadow: 0 0 0 0.125em $--color-dark;
    }
    &:focus {
        @include borderCol("dark");
        box-shadow: 0 0 0 0.125em $--color-dark;
    }
}

.gs-input--round {
    border: 1px solid $--color-round;
    outline: none; //选中边框
    font-size: 1rem;
    &:hover {
        @include borderCol("round");
        box-shadow: 0 0 0 0.125em $--color-round;
    }
    &:active,
     :focus {
        @include borderCol("round");
        box-shadow: 0 0 0 0.125em $--color-round;
    }
    &:focus {
        @include borderCol("round");
        box-shadow: 0 0 0 0.125em $--color-round;
    }
}

.gs-input--while {
    border: 1px solid $--color-while;
    outline: none; //选中边框
    font-size: 1rem;
    &:hover {
        @include borderCol("while");
        box-shadow: 0 0 0 0.125em $--color-while;
    }
    &:active,
     :focus {
        @include borderCol("while");
        box-shadow: 0 0 0 0.125em $--color-while;
    }
    &:focus {
        @include borderCol("while");
        box-shadow: 0 0 0 0.125em $--color-while;
    }
}

.shake {
    color: red;
    animation: shake 200ms ease-in-out;
}

@keyframes shake {
    /* 水平抖动，核心代码 */
    10%,
    90% {
        transform: translate3d(-50px, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(+1px, 0, 0);
    }
    30%,
    70% {
        transform: translate3d(-50px, 0, 0);
    }
    40%,
    60% {
        transform: translate3d(+1px, 0, 0);
    }
    50% {
        transform: translate3d(-50px, 0, 0);
    }
}